<template>
  <div id="tt">
    <div>{{ drag ? "拖拽中" : "拖拽停止" }}</div>
    <!--使用draggable组件 v-model绑定数组-->
    <draggable v-model="myArray"  @start="onStart" @end="onEnd">
        <transition-group>
        <div class="item" v-for="item in myArray" :key="item.id">{{item.name}}</div>
        </transition-group>
    </draggable>
    <div style="margin-top:30px;">
      {{ JSON.stringify(myArray)}}
    </div>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
export default {
  components: { draggable: vuedraggable },
  data() {
    return {
      drag: false,
      // 定义要被拖拽对象的数组
      myArray: [
        { people: 'cn', id: 10, name: 'www.itxst.com' },
        { people: 'cn', id: 20, name: 'www.baidu.com' },
        { people: 'cn', id: 30, name: 'www.taobao.com' },
        { people: 'us', id: 40, name: 'www.yahoo.com' }
      ]
    }
  },
  methods: {
    onStart() {
      this.drag = true
    },
    onEnd() {
      this.drag = false
    }
  }
}
</script>

<style scoped>
/*被拖拽对象的样式*/
.item {
    padding: 6px;
    background-color: #fdfdfd;
    border: solid 1px #eee;
    margin-bottom: 10px;
    cursor: move;
}
/*选中样式*/
.chosen {
    border: solid 1px #3089dc !important;
}
</style>
